<template>
	<view class="" style="background-color: #d70127;">
		<view class="content">
			<view class="df-sb" style="border-bottom: 1px solid #fff;padding-bottom: 20rpx;">
				<view class="" style="color: #fff;"> 姓名 </view>
				<view class="" style="color: #fff;"> {{userInfo.realname}} </view>
			</view>
			<view class="df-sb" style="border-bottom: 1px solid #fff;padding-bottom: 20rpx;">
				<view class="" style="color: #fff;"> 头像 </view>
				<image src="/static/image/avatar.png" mode="" v-if="!imgUrl" style="width: 100rpx;height: 100rpx;"
					@click="upImg"></image>
				<image :src="imgUrl" mode="" style="width: 100rpx;height: 100rpx;" @click="upImg" v-else></image>
			</view>
			<view class="df-sb" style="border-bottom: 1px solid #fff;padding-bottom: 20rpx;margin-top: 50rpx;"
				@click="$navTo('/pages/changePhone')">
				<view class="" style="color: #fff;"> 修改手机号 </view>
				<u-icon name="arrow-right" color="#fff"></u-icon>
			</view>
			<!-- <view class="" style="display: flex;justify-content: center;">
			<view class="btn" @click="gift"> 赠送 </view>
		</view> -->
		</view>
	</view>
</template>
<script>
	import {
		editUser
	} from '../request/api.js'
	export default {
		data() {
			return {
				imgUrl: '',
				userInfo: ''
			}
		},
		onLoad() {},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.imgUrl = this.userInfo.avatar
		},
		methods: {
			upImg() {
				let that = this;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.uploadImage(res.tempFilePaths[0])
					}
				})
			},
			uploadImage(url) {
				uni.uploadFile({
					url: 'https://api.wdjlm.cn/jeecg-boot/sys/common/upload',
					filePath: url,
					name: 'file',
					header: {
						'X-Access-Token': uni.getStorageSync('token')
					},
					success: (res) => {
						const result = JSON.parse(res.data).message
						this.imgUrl = result
						this.editUserMehod()
					},
					fail: (res) => {
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						})
					}
				})
			},
			editUserMehod() {
				editUser({
					id: this.userInfo.id,
					avatar: this.imgUrl
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						this.userInfo.avatar = this.imgUrl
						uni.setStorageSync('userInfo', this.userInfo)
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.content {
		height: 100vh;
		background: url('/static/image/bg.png') no-repeat center center;
		background-size: 100% 100%;
		overflow: hidden;
		padding: 80rpx 30rpx 200rpx;
	}

	.btn {
		width: 304rpx;
		height: 59rpx;
		line-height: 59rpx;
		background: linear-gradient(#BA986B 0%, #F1DBB6 100%);
		border-radius: 37rpx;
		text-align: center;
		color: #2B1D14;
		font-weight: 600;
		margin-top: 50rpx;
	}
</style>